<template>
    <div class="cancel-order">
        <div class="cancel-content">
            <img src="../../static/image/img_cancle.png" alt="">
            <h2>取消订单</h2>
            <p>您当日还剩 <span v-text="cancelInfo.restCount">3</span> 次订单取消机会，超出则无法用车。</p>
            <div class="cancel-btns">
                <button type="button" @click="cancelOrderFn($event)">取消订单</button>
                <button type="button" @click="cancelOrderFn($event)">继续用车</button>
            </div>
        </div>
    </div>
</template>

<script>
import qs from "qs"
export default {
    props: {"cancelInfo": Object},
    mounted () {
        console.log(this.cancelInfo);
    },
    methods: {
        cancelOrderFn (e) {

            let text = e.target.innerHTML;
            if (text == "取消订单") {
                console.log("取消");
                this.axios.post("/order/saveCancelInfo.json",
                    qs.stringify(
                {
                    access_token: this.global.token,
                    // orderId: this.cancelInfo.orderId,
                    orderId: this.cancelInfo.orderId,
                }
                )
                    )
                .then(res => {
                    console.log(res);
                    if (res.data.code == 200) {
                        this.$emit("closeCancelModel", true);
                        this.$router.push({path: "/Getcar"});
                    }
                })

            } else if (text == "继续用车") {
                console.log("继续");
                this.$emit("closeCancelModel", true);
            }
        },
    },
    data () {
        return {
            // orderId: "",
            // restCount: "",
        }
    }
 }
</script>

<style scoped>
    .cancel-order {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.30);
    }
    .cancel-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);

        width: 600px;
        height: 840px;
        padding: 48px 60px 60px;
        background-color: #fff;
        box-shadow: 0 10px 20px 0 rgba(0,0,0,0.10);
        border-radius: 10px;
    }
    img {
        /*width: 373px;*/
        height: 336px;
        margin: 0 auto;
        margin-bottom: 36px;
        background-color: #eee;
    }
    h2 {
        line-height: 50px;
        margin-bottom: 17px;
        font-family: PingFangSC-Semibold;
        font-size: 42px;
        color: #333;
        letter-spacing: 0;
    }
    p {
        height: 138px;
        margin-bottom: 62px;
        font-family: PingFangSC-Regular;
        font-size: 24px;
        color: #aaa;
        letter-spacing: 0;
    }
    p span {
        font-family: PingFangSC-Regular;
        font-size: 24px;
        color: #0db95f;
        letter-spacing: 0;
        line-height: 33px;
    }
    button {
        height: 100px;
        border-radius: 50px;

        font-family: PingFangSC-Regular;
        font-size: 32px;
        letter-spacing: 0;
    }
    button:first-of-type {
        width: 200px;
        color: #999;
    }
    button:last-of-type {
        width: 256px;
        background: #0DB95F;
        color: #fff;
    }

</style>
